<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
        <style>
            div { margin: 15px ; }
        </style>
        <script src="/javascripts/vue@2.6.12.js" type="text/javascript"></script>
    </head>
    <body>

        <div id="first">
            <div class="border">{{message}}</div>
            <kai-fa-miao></kai-fa-miao>
            <hr>
            <xi-an></xi-an>
            <hr>
            <kai-rui></kai-rui>
            <hr>
            <gong-yu></gong-yu>
        </div>

        <script>
            // Vue.js 2 中全局注册组件
            Vue.component( 'KaiFaMiao' , {
                template: `<div style="border: 1px solid red ;">云创动力·开发喵</div>`
            });
            // Vue.js 2 中全局注册组件
            Vue.component( 'XiAn' , {
                template: `<div style="border: 1px solid green ;">
                             <kai-fa-miao></kai-fa-miao>
                           </div>`
            });

            const app = new Vue({
                el: '#first',
                data: {
                    message: '问：都已经周三了，怎么还那么困？答：哪一天不困？'
                },
                // Vue.js 2 中本地注册组件
                components: {
                    KaiRui: {
                        template: `<div class="border">凯瑞</div>`
                    },
                    GongYu: {
                        template: `<div class="border">公寓</div>`
                    }
                }
            });
        </script>

        <hr color="red" >

        <div id="second">
            <div class="border">{{nickname}}</div>
            <xi-an></xi-an>
            <kai-fa-miao></kai-fa-miao>
            <!-- 在 second 中不可以使用在 app 中本地注册的组件 -->
            <kai-rui></kai-rui>
        </div>

        <script>
            const second = new Vue({
                el: '#second',
                data: {
                    nickname: '拐角遇到猪'
                }
            });
        </script>

    </body>
</html>